<!-- Here's the DIV that we inject the map into -->
<div #mapViewNode class="esri-view">
  <div class="legend-box">
    <div class="legend-control">
      <i class="ag_remove" [title]="l('pick_up')" [hidden]="!legendShow" (click)="legendShow = !legendShow"></i>
      <i class="ag_web_asset" [title]="l('create_area')" [hidden]="legendShow" (click)="legendShow = !legendShow"></i>
    </div>

    <form nz-form class="ant-advanced-search-form" [hidden]="!legendShow" [formGroup]="validateForm">
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="areaID">{{l('area_no')}}</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="code" id="code" [(ngModel)]="area.code" [placeholder]="l('please_enter_area_no')">
              <nz-form-explain *ngIf="validateForm.get('code').hasError('required')">{{l('please_enter_area_no')}}</nz-form-explain>
              <nz-form-explain *ngIf="validateForm.get('code').hasError('maxlength')">{{l('please_enter_max_length')}}255</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzLg="24" nzXl="24">
            <nz-form-item nzFlex>
              <nz-form-label nzRequired nzFor="siteId">{{l('site_alone')}}</nz-form-label>
              <nz-form-control>
                <nz-select formControlName="siteId" (ngModelChange)="area.siteId=$event;changeSite()" [(ngModel)]="area.siteId" [nzPlaceHolder]="l('please_select_site')">
                  <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
                </nz-select>
                <nz-form-explain *ngIf="validateForm.get('siteId').hasError('required')">{{l('please_select_site')}}</nz-form-explain>
             
              </nz-form-control>
            </nz-form-item>
          </div>

        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzFor="warehouseId">{{l('warehousing_company')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="warehouseId" [(ngModel)]="area.warehouseId" [nzPlaceHolder]="l('select_warehousing_company')">
                <nz-option [nzValue]="''" [nzLabel]="l('select_warehousing_company')"></nz-option>
                <nz-option *ngFor="let option of companyList" [nzValue]="option.id" [nzLabel]="option.houseName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="useType">{{l('area_effect')}}</nz-form-label>
            <nz-form-control>
              <nz-checkbox-group [ngModelOptions]="{standalone: true}" [(ngModel)]="checkStatusList"></nz-checkbox-group>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="longitude">{{l('longitude')}}</nz-form-label>
            <nz-form-control>
              <nz-input-number [(ngModel)]="area.longitude" formControlName="longitude" [nzStep]="1" [nzMax]="180"></nz-input-number>
              <nz-form-explain *ngIf="validateForm.get('longitude').errors">{{l('please_enter_longitude')}}</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>

            <nz-form-label nzRequired nzFor="latitude">{{l('latitude')}}</nz-form-label>
            <nz-form-control>
              <nz-input-number [(ngModel)]="area.latitude" formControlName="latitude" [nzStep]="1" [nzMax]="180"></nz-input-number>
              <nz-form-explain *ngIf="validateForm.get('latitude').errors">{{l('please_enter_latitude')}}</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="radius">{{l('radius')}}({{l('meter')}})</nz-form-label>
            <nz-form-control>
              <nz-input-number [(ngModel)]="area.radius" formControlName="radius" [nzMin]="1" [nzStep]="1" [nzMax]="10000"></nz-input-number>
              <nz-form-explain *ngIf="validateForm.get('radius').errors">{{l('please_enter_radius')}}</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row [nzGutter]="24">
          <div nz-col nzLg="24" nzXl="24" class="control-area">
            <nz-form-item nzFlex>
              <button nz-button [nzType]="'primary'" (click)="submitArea()">{{l('save')}}</button>
              <button nz-button (click)="reset()">{{l('reset')}}</button>
            </nz-form-item>
          </div>
        </div>
    </form>
  </div>
</div>